<template>
	<div class="wraper" :class="{isMYKEY:isMYKEY}">
		<div class="line"></div>
		<div class="nav-bar" :class="{iphoneX:isIphoneX,iphone:isIphone,isMYKEY:isMYKEY}">
			<div class="arrow" @click="goBack"></div>
		</div>
		<div class="tab" :class="{iphoneX:isIphoneX,iphone:isIphone}">
			<span :class="{on:pageState==1}" @click="changeState(1)">购买订单</span>
			<span :class="{on:pageState==2}" @click="changeState(2)">出售订单</span>
		</div>
		<div class="content" :class="{noList:list.length===0}">
			<div class="list" :class="{iphoneX:isIphoneX,iphone:isIphone}">
				<van-list
					v-model="loading"
	  				:finished="finished"
	  				:error.sync="loadError"
	  				:offset="offset"
	  				error-text="请求失败，点击重新加载"
	  				finished-text="已经全部加载完毕"
	  				@load="load"
				>
		  			<van-cell v-for="item of list" :key="item.id">
						<div class="item" @click="goDetail(item)">
							<div class="ele buy-info">
								<div class="left">{{pageState==1?'购买':'售出'}} {{item.orderusdt}}{{item.currency_id}}</div>
								<div class="price">￥{{item.orderrmb}}</div>
							</div>
							<div class="ele title">
								<div class="time-title">时间</div>
								<div class="state-title">状态</div>
							</div>
							<div class="ele state">
								<div class="time">{{item.date}}</div>
								<div class="state" :class="{on:(item.state==2 || item.state==4 || item.state==-2 || item.state == -4),cancel:item.state==-99,red:item.state==-3,wait:(item.state==1 || item.state==-5)}"
								>	
									<span @click.stop="goPay(item)" v-if="item.state==1 || item.state==-5"><b>●</b>{{item.showState}}{{item.showTimer}}</span>
									<i v-else>{{item.showState}}</i>
								</div>
							</div>
						</div>
		    		</van-cell>
		    		<div class="empty" v-if="list.length===0 && finished">
		    			<p class="img"><img src="../../static/images/empty.png"></p>
		    			<p class="desc">暂无订单</p>
		    		</div>
				</van-list>
			</div>
		</div>
	</div>
</template>
<script src="./orderList.js"></script>
<style scoped>
	@import './orderList.css';
</style>
<style>
	.content.noList .van-list__finished-text{
		display: none;
	}
</style>